<template>
	<view class="content">
		<view class="puzzle-box">
			<view 
				class="item" 
				v-for="(item,index) in newTatteList" 
				:key="index" 
				:style="{
					width: `${itemW}px`,
					height: `${itemW}px`, 
					left: `${item.left}px`, 
					top: `${item.top}px`, 
					backgroundSize: `${item.maxRowW}px ${item.maxRowH}px`, 
					backgroundPosition: `-${item.maxX}px -${item.maxY}px` 
				}"
				v-if="index < newTatteList.length - 1"
				@click="itemClick(item)"
			>
				<view :class="{'p-active': showBg}">{{index + 1}}</view>
			</view>
		</view>
		<view class="btn-group">
			<button size="mini" type="primary" @click="setItemPosition">打乱顺序</button>
			<button size="mini" type="default" @click="showBg = !showBg">{{showBg?'关闭':'开启'}}金手指</button>
		</view>
		
		<view class="set">
			<input type="number" value="4" placeholder="请输入矩阵规格(n*n)" @blur="blur"/>
			<view class="tips"> 请输入 2 - 10 之间的数字 （ps:数字太大 计算完渲染卡）</view>
			<view class="tips">友情提示：我这是随机打乱顺序 可能会出现 拼不回去的情况，若想能够拼回去 可自行在 shuffle 方法内去修改成自己矩阵乱序方法</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				gameW: 0,
				itemW: 0,
				tatteList:[],
				newTatteList:[],
				showBg:false,
			}
		},
		onLoad() {
			this.$nextTick(() => {
				this.init(4)
			})
			
		},
		methods:{
			init(row){
				uni.createSelectorQuery().select('.puzzle-box').boundingClientRect(res => {
					this.gameW = res.width
					this.itemW = parseInt(res.width / row)
					this.propertiesList(row)
				}).exec()
			},
			// 计算每个方块的 宽和高
			propertiesList(row){
				var tatter = []
				for(let i = 0; i < row * row; i ++){
					let absX = tatter.length % row // x轴坐标
					let absY = Math.floor(tatter.length / row)   // y轴坐标
					
					let maxX = (absX * Math.floor(this.gameW / row))        // 碎片x轴定位
					let maxY = (absY * Math.floor(this.gameW / row))        // 碎片y轴定位
					let maxRowW = (row * Math.floor(this.gameW / row))                          // 图片的宽
					let maxRowH = (Math.ceil(row * row / row) * Math.floor(this.gameW / row))   // 图片的高
					tatter.push({
						maxRowW,
						maxRowH,
						maxX,
						maxY,
						top: maxY,
						left: maxX,
					})
				}
				this.tatteList = JSON.parse(JSON.stringify(tatter))
				this.newTatteList = JSON.parse(JSON.stringify(tatter))
			},
			setItemPosition() {
				let arr = JSON.parse(JSON.stringify(this.tatteList));
				// 打乱顺序
				arr = this.shuffle(arr);
				
				for(let i = 0; i < arr.length; i++){
					this.newTatteList[i].top = arr[i].top
					this.newTatteList[i].left = arr[i].left
				}
			},
			// 打乱数组顺序
			shuffle(arr) {
				for (let i = arr.length - 1; i >= 0; i--) {
					let rIndex = Math.floor(Math.random() * (i + 1));
					let temp = arr[rIndex];
					arr[rIndex] = arr[i];
					arr[i] = temp;
				}
				return arr;
			},
			itemClick(item){
				let left = parseInt(item.left), top = parseInt(item.top), index = null;
	
				let direction = [
					{ left, top: item.top - this.itemW },
					{ left: item.left + this.itemW, top },
					{ left, top: item.top + this.itemW },
					{ left: item.left - this.itemW, top }
				]
				direction = direction.filter(item => {
					return item.left === this.newTatteList[this.newTatteList.length - 1].left && item.top === this.newTatteList[this.newTatteList.length - 1].top;
				})
				if(direction.length){
					index = this.newTatteList.findIndex(x => x.left === left && x.top === top );
	
					this.newTatteList[index].left = direction[0].left;
					this.newTatteList[index].top = direction[0].top;
					this.newTatteList[this.newTatteList.length - 1].left = parseInt(left);
					this.newTatteList[this.newTatteList.length - 1].top = parseInt(top);
	
					if(JSON.stringify(this.newTatteList) === JSON.stringify(this.tatteList)){
						// alert('牛批啊 老铁')
					}
				}
			},
			blur(e){
				if(+e.detail.value >=2 && +e.detail.value <= 10){
					this.init(+e.detail.value)
				}else{
					uni.showToast({
					    title: '请输入 2~10 之内的数',
						icon:'none',
					    duration: 2000
					});
				}
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.content{padding-top: 40rpx;;
		.puzzle-box{width: 700rpx;height: 700rpx;margin: 0 auto;overflow: hidden;box-shadow: 0 0 10rpx rgba(0,0,0,.3);position: relative;
			.item{position: absolute;background: #ddd;transform: scale(.98);transition: all .5s;background: url("https://zb-tes.oss-cn-shenzhen.aliyuncs.com/platform/lottery_activity/lottery_award_img/fea12a9223344eac8ec45d892e8665af.jpg") no-repeat;
				&>view{width: 100%;height: 100%;background: #fff;display: flex;align-items: center;justify-content: center;font-size: 36rpx;color: #333;opacity: 0;;transition: all 0.3s;
					&.p-active{opacity: 1;}
				}
			}
		}
		.btn-group{display: flex;padding: 0 25rpx;justify-content: space-around;margin-top: 20rpx;}
		.set{padding: 25rpx;
			input{border-bottom: 1px solid #eee;padding-bottom: 10rpx;}
			.tips{font-size: 26rpx;color: #999;margin-top: 16rpx;line-height: 42rpx;}
		}
	}
</style>
